<template>
    <div class="daisy-spinner spinner">
        <div class="part" v-for="index in 12" :key="index" :style="{transform: 'rotate(' + 30 * index + 'deg)', 'animation-delay': -index * 0.1 + 's'}">
            <div class="indicator"></div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'DaisySpinner',
})
export default class Daisy extends Vue {
    /** 尺寸 */
    @Prop({ type: Number }) public size!: number;
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.daisy-spinner {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    .part {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: left center;
        transform: rotate(0deg);
        animation: hidden 1.2s infinite steps(12, end);
        .indicator {
            width: 10px;
            height: 3px;
            border-radius: 8px;
            transform: translate(10px, 0px)
        }
    }

    &.dark {
        .part {
            .indicator {
                background-color: @color-black;
            }
        }
    }
    &.light {
        .part {
            .indicator {
                background-color: @color-white;
            }
        }
    }
}

@keyframes hidden {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
</style>
